<template>
	<div class="container add_edit">
		<el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px">
			<el-form-item label="标题">
				<el-input v-model="form.title" placeholder="请输入标题" clearable></el-input>
			</el-form-item>
			<el-form-item label="价格">
				<el-input v-model="form.price" placeholder="请输入价格" clearable></el-input>
			</el-form-item>
			<el-form-item label="支付比例" prop="proportion" ref="proportion">
				<el-cascader v-model="form.proportion" :options="proportionOptions" ref="cascaderObj"
					@change="proportionChange" filterable
					:props="{ expandTrigger: 'hover', checkStrictly: true, emitPath: false, value: '_id', label: 'title',multiple:true }"
					clearable>
					<template slot-scope="{ node, data }">
						<div @click="proportionChange(data._id)" class="cascader">{{data.title}}</div>
					</template>
				</el-cascader>
			</el-form-item>
			<div class="container last_container use-table">
				<div class="dflex_sb margin_b_15 table-head">
					<div class="dflex">
						<el-button class="table-btn" @click="importGoods">导入商品</el-button>
					</div>
				</div>
				<el-table ref="etbl" :data="this.form.goods" @selection-change="selectionChange" highlight-current-row>
					<el-table-column type="selection" :selectable="selectable"></el-table-column>
					<el-table-column label="商品" align="center" width="330">
						<template slot-scope="scope">
							<div class="dflex_vertical_c">
								<use-carousel :width="84" :height="84" :imgs="scope.row.imgs"></use-carousel>
								<div class="left_just margin_l_10">
									<el-popover popper-class="use_popover" :open-delay="200" :close-delay="40"
										placement="right" :title="scope.row.name" trigger="hover"
										:content="scope.row.name_pw || '--'">
										<div slot="reference" class="dflex_d_c">
											<div class="ellipsis crpr">{{ scope.row.name }}</div>
											<div class="ellipsis crpr">{{ scope.row.name_pw || '--' }}</div>
										</div>
									</el-popover>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column property="stock_num" label="数量" align="center"></el-table-column>
					<el-table-column label="操作" align="center" fixed="right" width="120">
						<template slot-scope="scope">
							<div class="margin_t_10">
								<el-tooltip :open-delay="350" content="删除" placement="top" :hide-after="1000"
									:enterable="false" effect="light">
									<el-button circle size="medium" icon="el-icon-delete" class="table-btn"
										@click="remove(scope.row)"></el-button>
								</el-tooltip>
							</div>
						</template>
					</el-table-column>
					<div slot="empty">
						<el-empty description=" "></el-empty>
					</div>
				</el-table>
			</div>
			<el-button :loading="formLoading" round icon="el-icon-check" class="confirm-btn"
				@click="submitForm('ruleForm')">提交</el-button>
			<el-button round icon="el-icon-back" class="return-btn" @click="returnPage">返回</el-button>
		</el-form>
		<goods ref="goodsRef" @choiceGoods="getGoodsDatas"></goods>
		<el-drawer title="导入商品" size="500px" class="import_drawer" :visible.sync="importDrawer" direction="rtl"
			:append-to-body="true" :wrapperClosable="false">
			<div style="height: 90%; overflow: overlay;">
				<div class="import_goods" v-for="(item, i) in goodsDatas" :key="i">
					<div class="dflex_vertical_c">
						<use-carousel :width="84" :height="84" :imgs="item.imgs"></use-carousel>
						<div class="left_just margin_l_20">
							<el-popover :open-delay="350" :close-delay="80" placement="top" trigger="hover"
								:content="item.name + ''">
								<div slot="reference" class="ellipsis crpr">{{ item.name }}</div>
							</el-popover>
							<el-popover :open-delay="350" :close-delay="80" placement="top" trigger="hover"
								:content="item.name_pw">
								<div slot="reference" class="ellipsis crpr">{{ item.name_pw }}</div>
							</el-popover>
						</div>
					</div>
					<el-form :model="item" ref="ruleForm" :rules="rules" label-width="90px"
						class="add_edit margin_t_20">
						<el-form-item label="数量" prop="stock_num" ref="stock_num">
							<el-input v-model.number="item.stock_num" placeholder="请输入数量" type="number" :min="1" clearable
								oninput="value = parseInt(value) || 1">
							</el-input>
						</el-form-item>
					</el-form>
				</div>
				<div class="btn pos_a">
					<el-button round icon="el-icon-check" class="confirm-btn" @click="importData('ruleForm')">导入
					</el-button>
					<el-button round icon="el-icon-back" class="return-btn" @click="importDrawer = false">取消</el-button>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	const __name = 'wmz-goods-combo';
	const __proportion = 'wmz-proportion';
	const __goodsDetail = 'wmzmall-goods-detail';
	export default {
		data() {
			return {
				dataId: '',
				goodsDatas: [],
				formLoading: false,
				importDrawer: false,
				proportionOptions: [],

				form: {
					title: '',
					proportion: '',
					goods: []
				},
				rules: {}
			};
		},
		methods: {
			async loadData() {
				let proportion = await this.$db[__proportion].tolist({
					page: 1,
					rows: 500
				});
				this.proportionOptions = proportion.datas
				if (!this.dataId) {
					this.$db[__name].getsort().then(res => {
						if (res.code == 200) {
							this.form.sort = ++res.datas.sort;
						}
					});
					return;
				}

				await this.$db[__name].tofirst(this.dataId).then(res => {
					if (res.code == 200) {
						for (let item in this.form) {
							this.form[item] = res.datas[item];

						}
					}
				});
			},
			proportionChange(id) {

			},
			importGoods() {
				this.$db[__name]
					.where({
						import_id: this.$db.$cmd.exists(true)
					})
					.tolist({
						loading: false
					})
					.then(res => {
						let ids = [];
						if (res.code == 200) {
							ids = res.datas.map(x => x.import_id);
						}
						this.$refs.goodsRef.show({
							_id: this.$db.$cmd.nin(ids),
							state: '销售中'
						});
					});
			},
			getGoodsDatas(datas) {
				let ids = [];
				datas.forEach(x => {
					x.stock_num = 1;
					ids.push(x._id);
				});
				/* this.$db[__goodsDetail]
					.where({
						goods_id: this.$db.$cmd.in(ids)
					})
					.tolist({
						loading: false
					})
					.then(res => {
						if (res.code == 200) {
							datas.forEach(x => {
								if (res.datas.findIndex(d => d.goods_id == x._id) != -1) {
									x.desc_mobile = res.datas.find(d => d.goods_id == x._id).desc_mobile;
								}
							});
						}
					}); */

				this.goodsDatas = datas;
				this.importDrawer = true;
			},
			importData(formName) {
				if(this.goodsDatas){
					this.form.goods = this.goodsDatas
				}
				let _valid = true;
				for (var i = 0; i < this.$refs[formName].length; i++) {
					this.$refs[formName][i].validate((valid, obj) => {
						if (!valid) {
							let __obj = this.$api.get_form_prop(obj);

							this.$refs[__obj][i].$el.querySelector('input').focus();
							this.$refs[__obj][i].$el.querySelector('input').click();
							this.$refs[__obj][i].$el.scrollIntoViewIfNeeded(true);
							_valid = false;
							return;
						}
					});
					if (!_valid) {
						return false;
					}
				}
				if (_valid) {
					this.importDrawer = false;
				}
			},
			remove(item) {
				this.form.goods.splice(item, 1);
			},
			selectable(datas) {
				if (this.state == '销售中') return true;

				if (datas.state == '销售中') {
					return false;
				}

				return true;
			},
			submitForm(formName) {
				this.form.goods = this.goodsDatas
				this.formLoading = true;
				if (!this.dataId) {
					this.$db[__name].add(this.form).then(res => {
						if (res.code == 200) {
							this.getOpenerEventChannel().emit('loadData');
							this.returnPage();
						}
						this.formLoading = false;
					}).catch(() => {
						this.formLoading = false;
					})
				} else {
					this.$db[__name].update(this.dataId, this.form).then(res => {
						if (res.code == 200) {
							this.getOpenerEventChannel().emit('loadData');
							this.returnPage();
						}
						this.formLoading = false;
					}).catch(() => {
						this.formLoading = false;
					})
				}
			},
			returnPage() {
				uni.$emit('closeTab');
				uni.redirectTo({
					url: '/pages/goods/combo/combo_goods'
				});
			}
		},
		created() {
			this.dataId = this.$route.query.id || '';
			this.loadData();
		}
	};
</script>

<style lang="scss">
	.cascader {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding-left: 44px;
		z-index: 99;
	}

	.import_drawer .add_edit .el-input,
	.import_drawer .add_edit .el-cascader {
		width: 80%;
	}

	.import_drawer .el-drawer__header {
		background-color: #f5f5f5;
		padding-bottom: 32px;
	}

	.import_drawer .el-drawer__body {
		background-color: #f5f5f5;
	}

	.import_drawer .sele {
		width: 80%;
	}

	.import_drawer .sele>>>.el-input {
		width: 100%;
	}

	.import_goods {
		padding: 20px;
		background-color: #fff;
		margin: 16px;
		border-radius: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.import_goods .ellipsis {
		width: 300px;
	}

	.btn {
		bottom: 20px;
		right: 20px;
	}

	.previewDrawerBtn {
		bottom: 20px;
		right: 20px;
	}

	.qrcode_box {
		margin: 16px;
		border-radius: 10px;
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
	}

	.qrcode_box .ellipsis {
		max-width: 300px;
	}
</style>